<template>
	<view class="item">
		<image :src="item.img_avatar_url" mode=""></image>
		<view class="item_title">
			{{item.name}}
		</view>
		<view class="item_num">
			{{item.total_user}}成员
		</view>
		
		<view class="item_btn btn_stop" v-if="item.is_add" @click="handAdd(2)">
			已加入
		</view>
		<view class="item_btn btn_add"  @click="handAdd(1)" v-else>
			<u-icon name="plus" color="#fff"></u-icon>
			<text style="margin-left: 10rpx;">加入</text>
		</view>
	</view>
</template>

<script>
	import {
		jiaru
	} from '@/common/api/start.js'
	export default {
		props: {
			item:{
				type:Object,
				default:() => {}
			}
		},
		data() {
			return {
				
			}
		},
		methods:{
			handAdd(type) {
				let that = this;
				if (type == 2) {
					uni.showModal({
						title: '提示',
						content: '是否退出该星球',
						success: function(res) {
							if (res.confirm) {
								jiaru({
									id: that.item.id,
									type
								}).then(res => {
				
									that.item.is_add = 0;
				
									console.log('ressss', res);
								})
							} else if (res.cancel) {
								return;
							}
						}
					});
				} else {
					jiaru({
						id: this.item.id,
						type
					}).then(res => {
				
						this.item.is_add = 1;
				
						console.log('ressss', res);
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.item {
		width: 330rpx;
		height: 402rpx;
		background: #F7F8FA;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 16rpx;
		padding-top:40rpx;
		box-sizing: border-box;
		margin-top: 32rpx;
		image {
			width: 124rpx;
			height: 124rpx;	
			border-radius: 8rpx;
		}
		.item_title {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #444444;
			margin-top: 32rpx;
		}
		.item_num {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #888888;
			margin-top: 8rpx;
		}
		.item_btn {
			width: 142rpx;
			height: 56rpx;
			background: #55B877;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 24rpx;
		}
		.btn_add {
			background: #55B877;
			color: #FFFFFF;
		}
		.btn_stop {
			background: #eeeeee;
			color: #888888;
		}
	}
</style>